Using Observable
My summary from 11/Feb/2023
Interactive visualizations are best made with html.
Presentation Tools
Powerpoint and google-docs do not consistently allow to embed HTML
Quatro
Can an embed HTML nicely
Nice presentation with https://revealjs.com (pdf and standallone html OK)
Other
Interactivity
html_widgets (not all widgets work)
Shiny (needs server)
Observable.js (nice interactive alternative) not yet 100% sure what happens
Workflow
Observable.js is java script library for interactivity. Best way is to develop them on a website called
You can then include the code via copy&paste into the cell (or) do it differently.
Is like a reactive framework. Variables listen to their changes and can be used before they are defined. It can be easily used with quatro (also to make interactive slides).
The cool thing is that you can include functions from the community very easily. The following code downloads the summary-table
This is the data in R:
x y
1 22 131
2 41 139
3 52 128
To use the data in observable
It has been uploaded a while ago into ObservableHQ and can be used from there via the following command
Click on the car to filter. The right table will update
To create a dynamic variable you can use viewof and a imput widgets, see.
viewof b = Inputs.range([-10, 120], {label: "Intercept", step: 0.1})
viewof w = Inputs.range([-5, 5], {label: "Slope", step: 0.1})
Plot.plot({
marks: [
Plot.dot(dat, {x: "x", y: "y"}),
Plot.line(curve(dat), {x: "x", y: "y"})
]})function curve(template){
const ages = template.map(d => d.x);
const [minAge, maxAge] = d3.extent(ages);
const xvals = d3.range(minAge, maxAge, (maxAge - minAge) / 100);
let yhat = xvals.map(x => w*x + b);
return xvals.map((x, i) => ({x, y: yhat[i]})); //Thanks ChatGPT
}